<template>
    <div>
      <a-modal
        :visible="visible"
        :title="(formState.id?'修改':'新增')+'机票信息'"
        :maskClosable="false"
        :closable="true"
        :destroyOnClose="true"
        width="70%"
        :dialog-style="{ margin: '0 auto' }"
        wrapClassName=""
        @cancel="visible = false">
            <div style="width: 100%;margin: 0 auto;">
                <a-form :form="cform" ref="form" class="applicationForTransferForm-model-form-box">
                    <a-descriptions :column="3" bordered style="width: 100%;">
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                            <span class="xhText" >*</span>
                                往&nbsp;返&nbsp;程
                            </span>
                            <a-form-item ref="fskdw" prop="fskdw" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-radio-group
                                        style="width: 100%;"
                                        name="radioGroup"
                                        v-model="formState.fwfqk"
                                        v-decorator="[ 'fwfqk', {initialValue:formState.fwfqk,rules: rules.fwfqk}]">
                                        <!-- <a-radio value="往返">往返</a-radio> -->
                                        <a-radio value="去程">去程</a-radio>
                                        <a-radio value="返程">返程</a-radio>
                                    </a-radio-group>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                金&emsp;&emsp;额
                            </span>
                            <a-form-item ref="fjexx" prop="fjexx" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-input-number
                                        style="width: 100%;min-width: 100px;"
                                        v-model="formState.fjexx"
                                        placeholder="请输入转账金额"
                                        v-decorator="[ 'fjexx', {initialValue:formState.fjexx,rules: rules.fjexx}]"
                                        >
                                    </a-input-number>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                收款单位
                            </span>
                            <a-form-item ref="fyt" prop="fyt" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-select
                                        v-model="formState.fskdw"
                                        :allowClear="true"
                                        style="width: 300px"
                                        placeholder="请选择收款单位"
                                        v-decorator="[ 'fskdw', {initialValue:formState.fskdw,rules: rules.fskdw}]">
                                        <a-select-option
                                            @click="getFskdw(trem)"
                                            v-for="(trem,tIndex) in gsList"
                                            :key="tIndex"
                                            :value="trem.fmc">
                                            {{ trem.fmc }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                账&nbsp;&nbsp;&nbsp;&nbsp;户
                            </span>
                            <a-form-item ref="fzh" prop="fzh" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-input
                                        style="width: 100%"
                                        v-model="formState.fzh"
                                        placeholder="请输入账户"
                                        v-decorator="[ 'fzh', {initialValue:formState.fzh,rules: rules.fzh}]"
                                        >
                                    </a-input>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                        <a-descriptions-item>
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                开户银行
                            </span>
                            <a-form-item ref="fkhyh" prop="fkhyh" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-input
                                        style="width: 100%"
                                        v-model="formState.fkhyh"
                                        placeholder="请输入开户银行"
                                        v-decorator="[ 'fkhyh', {initialValue:formState.fkhyh,rules: rules.fkhyh}]"
                                        >
                                    </a-input>
                                </div>
                            </a-form-item>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-form>
            </div>
            <template slot="footer">
                <a-button @click="visible = false">取消</a-button>
                <a-button :loading="loading" class="blue-btn" @click="handleOk">保存并提交</a-button>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    nkDgzzgslbList,
    spcyjcyfybxdAddzzsq,
    zzrybxdupdatejczt,
} from './service/index'
import { axios } from '@/utils/request'
import YchConstant from "@/api/YchConstant";
export default {
    data() {
        return {
            visible: false,
            isEdit: false,
            loading: false,
            cform:this.$form.createForm(this, { name: 'cform' }),
            formState: {},
            rules:{
                fwfqk: [{
                    required: true,
                    message: '请选择往返程',
                    trigger: 'blur',
                }],
                fskdw: [{
                    required: true,
                    message: '请输入收款单位',
                    trigger: 'blur',
                }],
                fkhyh: [{
                    required: true,
                    message: '请输入开户银行',
                    trigger: 'blur',
                }],
                fzh: [{
                    required: true,
                    message: '请输入账户',
                    trigger: 'blur',
                }],
                fjexx: [{
                    type: 'number',
                    required: true,
                    message: '请输入转账金额',
                    trigger: 'blur',
                }],
            },
            itemId: '',
            gsList: [],
        }
    },
    methods: {
        getData(val,ids){
            this.formState = val
            this.itemId = ids
            this.getnkDgzzgslbList()
        },
        upGetData(val){
            this.formState = val
            this.formState.fjexx = Number(this.formState.fjexx)
            this.cform.setFieldsValue({
                ...this.formState
            })
        },
        getnkDgzzgslbList(){
            nkDgzzgslbList().then(res => {
                if(res.success){
                    this.gsList = []
                    this.gsList = res.result.records
                }
            })
        },
        getFskdw(val){
            this.formState.fskdw = val.fskdw
            this.formState.fzh = val.fzh
            this.formState.fkhyh = val.fkhh
        },
        handleOk(){
            this.cform.validateFields((err, values) => {
                if (!err) {
                    let data = this.formState
                    this.loading = true
                    if(this.formState.id){
                        zzrybxdupdatejczt(data).then(res => {
                            if(res.success){
                                this.$message.success(res.message)
                                this.$emit('updatezzsquSuccess')
                                this.visible = false
                            } else {
                                this.$message.warning(res.message)
                            }
                            this.loading = false
                        })
                    } else {
                        data = {...data,fbxdgrjlid: this.itemId}
                        spcyjcyfybxdAddzzsq(data).then(res => {
                            if(res.success){
                                this.$message.success(res.message)
                                this.$emit('updatezzsquSuccess')
                                this.visible = false
                            } else {
                                this.$message.warning(res.message)
                            }
                            this.loading = false
                        })
                    }
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    },
}
</script>
<style lang="less">
    .applicationForTransferForm-model-form-box {
        padding: 0 15px;
        margin-top: 20px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            .ant-form-item {
              margin-bottom: 0 !important;
            }
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 130px !important;//确保左侧固定文字不会换行
            justify-content: center;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{

        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }

    }
</style>
